<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import { getCurrentTemp } from '@/api'

export default defineComponent({
  name: 'CompHeader',
  setup() {
    let interval: NodeJS.Timeout | undefined

    const temperature = ref(0)

    function getTemp() {
      getCurrentTemp().then(({ data }) => {
        temperature.value = data ?? 0
      })
    }

    onMounted(() => {
      getTemp()
      interval = setInterval(() => {
        getTemp()
      }, 60000)
    })

    onUnmounted(() => {
      if (interval) {
        clearInterval(interval)
      }
    })

    return { temperature }
  },
})
</script>

<template>
  <header>
    <div class="temperature-box">温度：{{ temperature }}°C</div>
    <h1 class="title-text">杭汽轮集团智慧运维平台</h1>
    <img src="/images/标题.png" alt="title" />
  </header>
</template>

<style lang="scss" scoped>
header {
  position: relative;
  width: 100%;

  .title-text {
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 35px;
    font-weight: bolder;
    line-height: 1;
    margin: 0;
    padding: 0;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
  }
}

.temperature-box {
  position: absolute;
  z-index: 2;
  right: var(--common-edge);
  bottom: 0;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}
</style>
